<template>
	<view style="background-color: #eee;">
		<scroll-view @scroll="scroll" @scrolltolower="onRefresh"  :scroll-top="scrollTop" scroll-y class="scroll-view">
			<view class="c-box" id="h5Product" >
				<view class="my">
					<view class="mt">
						<person-header :currentUser="currentUser"></person-header>
					</view>
				</view>
				<view class="product">
					<view class="h2">样册管理</view>
					<view class="ul">
						<view class="li" v-for="(item,index) in infinite_page.samplebookList" :key="index">
							<view class="img" style="height: 175rpx">
								<image mode="widthFix" :src="item.imgUrl"/>
							</view>
							<view class="tit" style="height: 175rpx">
								<view class="nowrap h2" >{{item.bookName}}</view>
								<view class="p" style="margin-top: 3px" >{{currentUser.company}} ></view>
								<view class="nowrap h2" style="margin-top: 3px;" >品牌：{{item.brandName}}</view>
								<view class="b">
									<view class="btn">
										<view class="a" @click="deleteSampleBook(item.id)">
											<image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon32.png"/></view>
										<view class="a" @click="updateSampleBook(item.id)">
											<image mode="widthFix" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon31.png"/></view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<hint ref="hint"></hint>
				<view class="c-h120"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import sampleApi from '@/api/samplebook.js'
	import commonApi from '@/utils/commonMethod.js';
	import personHeader from "../../components/person/personHeader.vue";
	
	export default {
		components: {
			personHeader
		},
		data() {
			return {
				currentUser: {},
				collectionCount: '',
				browseCount: '',
				infinite_page: {currentPage: 1, totalPage: '', samplebookList: [], limit: '10'},
				disabled:false,
				loading: true,
				noMore: false,
				noData: false,
				search: {
					totalPage:'',
					page: 1,
					limit:10,
					lastpage: 0
				},
				scrollTop: 0,
				totalPage:0,
				
				startTime:'', //进入页面时间
				endTime:'',//离开页面时间
				currentUrl:'',//当前页面全路径
			}
		},
		directives: {
			focus: {
				update: function (el, binding) {
					if (binding.value) {
						el.focus();
					}
				}
			}
		},
		onShow(){
		  
		  setTimeout(()=> {
		    
		    if (getApp().globalData.onShow) {
		      getApp().globalData.onShow = 0;
		      console.log("demo前后台切换之切到前台")
		    }
		    else {
		      console.log("demo页面被切换显示")
		      this.startTime = +new Date();
		    }
		    
		  }, 100);
		},
		onHide(){
		  setTimeout(() => {
		    var that = this
		    if (getApp().globalData.onHide) {
		      getApp().globalData.onHide = 0;
		      console.log("还在当前页面活动")
		    }
		    else {
		      that.endTime = +new Date();
		      console.log("demo页面停留时间：" + (that.endTime - that.startTime))
		      var stayTime = Math.round((that.endTime - that.startTime)/1000);
		       //这里获取到页面停留时间stayTime，然后了可以上报了
		       this.saveFootPrint(stayTime);
		    }
		  }, 100)
		},
		onUnload(){
		    setTimeout(() => {
		    var that = this
		    if (getApp().globalData.onHide) {
		      getApp().globalData.onHide = 0;
		      console.log("还在当前页面活动")
		    }
		    else {
		      that.endTime = +new Date();
		      console.log("demo页面停留时间：" + (that.endTime - that.startTime))
		      var stayTime = Math.round((that.endTime - that.startTime)/1000);
		       //这里获取到页面停留时间stayTime，然后了可以上报了
		       this.saveFootPrint(stayTime);
		    }
		  }, 100)
		},
		async mounted() {
			//获取当前用户
			const currentPromise = await commonApi.currentUserAxios()
			this.currentUser = currentPromise.data.session_user_h5
			//获取我的样册
			this.getSamplebookList()
			
			const pages = getCurrentPages()
			const currentPage =pages[pages.length - 1]
			this.currentUrl = currentPage.$page.fullPath
		},
		methods: {
			saveFootPrint(stayTime){
			    commonApi.saveFootPrint(this.currentUser.id,this.startTime,stayTime,this.currentUrl,"样册管理")
			        
			},
			scroll(e) {
				this.scrollTop = e.detail.scrollTo;
				this.$store.dispatch('renewScrollTop', e.detail.scrollTop);
			},
			onRefresh() {
				if(this.search.page <= this.totalPage){
					this.search.page;
					this.$refs.hint.setStatus('loading');
					console.log("还有下一页" + this.search.page);
					this.getSamplebookList();
				}else{
					this.$refs.hint.setStatus('loadingComplete');
					console.log("没有下一页")
				}
			},
			getSamplebookList() {
				if(this.search.page != this.search.lastpage){
					this.search.lastpage = this.search.page;
					
					sampleApi.getSampleBookList(this.search.page,this.search.limit,this.currentUser.id).then(res => {
						let resList = res.data.page.list
						this.totalPage = res.data.page.totalPage
						if (resList.length > 0) {
							this.infinite_page.samplebookList = this.infinite_page.samplebookList.concat(resList)
							this.search.page++
						}else{
							if (this.search.page == 1) {
								this.noData = true
								this.$refs.hint.setStatus('noData');
							} else {
								this.noMore = true
								this.$refs.hint.setStatus('loadingComplete');
							}
						}
						if (resList.length > 0 && resList.length < 10) {
							this.noMore = true
							this.$refs.hint.setStatus('loadingComplete');
						}
					})
				}
	
			},
			updateSampleBook(id){
				uni.navigateTo({
					url: '/pages/statistics/editSamplebook?samplebookId=' + id
				})
			},
			submitUpdateName(){
	
			},
			deleteSampleBook(id){
				let data = [id]
				uni.showModal({
					title: "提示",
					content: "是否删除",
					showCancel:true,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							sampleApi.deleteByDelFlag(data).then(res=>{
							if(res.data.code === 0){
								//todo 弹窗提示
								layer.open({
									anim: '提示',
									content: '删除成功',
									btn: ['确定'],
									yes(index){
										layer.close(index)
									}
								});
								this.infinite_page.samplebookList = [];
								this.search.page = 1;
								this.search.lastpage = 0;
								this.loading = true;
								this.noMore = false;
								this.noData = false;
								this.getSamplebookList();
							}
						})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					} 
				});
			},
		}
	}
</script>

<style>
	.my .mt {
		/* height: 5.733333rem; */
		background: url(https://m.nocexpo.com/statics/js/modules/h5/img/img15.jpg) no-repeat;
		background-size: 100% auto;
		overflow: hidden;
		margin-bottom: 28rpx;
		background-color: #fff;
		height: auto;
	}
	.product {
	    padding: 0 28rpx;
	}
	.product .h2 {
	    padding-top: 23rpx;
	    font-size: 28rpx;
	    color: #333333;
	    line-height: 28rpx;
	}
	.product .li {
	    padding: 14rpx;
	    background: #fff;
	    border-radius: 9rpx;
	    overflow: hidden;
	    margin-top: 23rpx;
	}
	.product .li .img {
	    width: 14rpx;
	    height: 14rpx;
	    border-radius: 9rpx;
	    overflow: hidden;
	    float: left;
	}
	.product .li .tit {
	    width: 460rpx;
	    height: 14rpx;
	    overflow: hidden;
	    float: right;
	}
	.product .li .tit .h2 {
	    font-size: 24rpx;
	    color: #333333;
	    padding: 5rpx 0;
	    margin-bottom: 5rpx;
	}
	.product .li .tit .p {
	    color: #8f9aa8;
	    font-size: 20rpx;
	}
	.product .li .tit .h2 {
	    font-size: 24rpx;
	    color: #333333;
	    padding: 5rpx 0;
	    margin-bottom: 5rpx;
	}
	.product .li .tit .b {
	    overflow: hidden;
	    margin-top: 17rpx;
	}
	.product .li .tit .btn {
	    float: right;
	}
	.product .li .tit .btn .a {
	    display: block;
	    float: right;
	    width: 33rpx;
	    height: 33rpx;
	    margin-left: 28rpx;
	}
	.lastLine {
	    font-size: 20rpx;
	    color: #b0b2bf;
	    line-height: 70rpx;
	    text-align: center;
	    padding-bottom: 28rpx;
	    margin-top: 102rpx;
	}
	.c-h120 {
	    height: 112rpx;
	}
	image {
		width: 100%;
		vertical-align: top;
	}
	.scroll-view {
	    height: calc(100vh - 10rpx);
	}
</style>